<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原神</title>
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="./icons/favicon.ico">
    <!-- 引入css初始化文件 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <!-- 引入index的css文件 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入swiper的css文件 -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <!-- 引入swiper的js文件 -->
    <script src="./js/swiper-bundle.min.js"></script>
    <!-- 引入index的css文件 -->
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 版本信息 -->
    <div class="suspension-box">
        <div class="game-info">
            <div class="to-main"></div>
        </div>
    </div>
    <!-- 头部模块 -->
    <div class="header">
        <div class="poster">
            <div>
                <img src="./images/big_title.png" alt="" class="big-title">
                <div class="more">
                    <img src="./images/img1.png" alt="" class="img1">
                    <div class="download">
                        <a href="javascript:;"></a>
                    </div>
                    <img src="./images/img2.png" alt="" class="img2">
                    <img src="./images/img3.png" alt="" class="img3">
                </div>
                <div class="show-pv">
                    <img src="./images/show.png" alt="">
                </div>
                <!-- 适龄提示 -->
                <img src="./icons/12+.png" alt="" class="age-tips">
                <!-- 协议&权限 -->
                <div class="other-msg">
                    <a href="javascript:;">隐私协议</a>
                    <a href="javascript:;">用户权限</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 内容模块 -->
    <div class="content">
        <!-- 角色情报 -->
        <div class="characte-box">
            <!-- Swiper -->
            <div class="swiper mySwiper characte-swiper">
                <div class="swiper-wrapper">
                    <!-- 八重神子 -->
                    <div class="swiper-slide">
                        <img src="./images/slider_YaeMiko.png" alt="" class="characte-pic">
                        <img src="./images/slider_YaeMiko_info.png" alt="" class="characte-info">
                        <div class="chinese-cv">
                            <img src="./images/YaeMiko-chinese-cv-0.png" alt="">
                            <img src="./images/YaeMiko-chinese-cv-1.png" alt="">
                        </div>
                        <div class="japanese-cv">
                            <img src="./images/YaeMiko-japanese-cv-0.png" alt="">
                            <img src="./images/YaeMiko-japanese-cv-1.png" alt="">
                        </div>
                        <img src="./images/show.png" alt="" class="characte-show">
                    </div>
                    <!-- 雷电将军 -->
                    <div class="swiper-slide">
                        <img src="./images/slider_RaidenShogun.png" alt="" class="characte-pic">
                        <img src="./images/slider_RaidenShogun_info.png" alt="" class="characte-info">
                        <div class="chinese-cv">
                            <img src="./images/RaidenShogun-chinese-cv-0.png" alt="">
                            <img src="./images/RaidenShogun-chinese-cv-1.png" alt="">
                        </div>
                        <div class="japanese-cv">
                            <img src="./images/RaidenShogun-japanese-cv-0.png" alt="">
                            <img src="./images/RaidenShogun-japanese-cv-1.png" alt="">
                        </div>
                        <img src="./images/show.png" alt="" class="characte-show">
                    </div>
                    <!-- 珊瑚宫心海 -->
                    <div class="swiper-slide">
                        <img src="./images/slider_KokoMi.png" alt="" class="characte-pic">
                        <img src="./images/slider_KokoMi_info.png" alt="" class="characte-info">
                        <div class="chinese-cv">
                            <img src="./images/KokoMi-chinese-cv-0.png" alt="">
                            <img src="./images/KokoMi-chinese-cv-1.png" alt="">
                        </div>
                        <div class="japanese-cv">
                            <img src="./images/KokoMi-japanese-cv-0.png" alt="">
                            <img src="./images/KokoMi-japanese-cv-1.png" alt="">
                        </div>
                        <img src="./images/show.png" alt="" class="characte-show">
                    </div>
                </div>
                <div class="swiper-pagination characte-pagination"></div>
            </div>
        </div>
        <!-- 最新怪物 -->
        <div class="new-monster">
            <!-- Swiper -->
            <div class="swiper mySwiper new-monster-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="monster-info">
                            <div class="monster-info-box">
                                <div class="video-box">
                                    <video src="./media/monster_1.mp4" autoplay="autoplay" muted="muted"
                                        loop="loop"></video>
                                </div>
                                <img src="./images/monster_1.png" alt="" class="monster-1-img">
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="monster-info">
                            <div class="monster-info-box">
                                <div class="video-box">
                                    <video src="./media/monster_2.mp4" autoplay="autoplay" muted="muted"
                                        loop="loop"></video>
                                </div>
                                <img src="./images/monster_2.png" alt="" class="monster-2-img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="./images/left_right_move.png" alt="" class="left-right-move">
        </div>
        <!-- 版本活动 -->
        <div class="version-activity">
            <div class="activity-title">
                <img src="./images/activity-title-1-1.png" alt="">
            </div>
            <div class="activity-con-1"></div>
            <div class="activity-title">
                <img src="./images/activity-title-2-0.png" alt="">
            </div>
            <div class="activity-con-2"></div>
            <div class="activity-title">
                <img src="./images/activity-title-3-0.png" alt="">
            </div>
            <div class="activity-con-3"></div>
        </div>
        <!-- 游戏特色 -->
        <div class="game-special">
            <!-- Swiper -->
            <div class="swiper mySwiper game-special-swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/game-special-1.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/game-special-2.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/game-special-3.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/game-special-4.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/game-special-5.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/game-special-6.png" alt="">
                    </div>
                </div>
            </div>
            <div class="swiper-pagination game-special-pagination"></div>
        </div>
        <!-- 关注 -->
        <div class="follow">
            <span></span>
            <div>
                <img src="./icons/weibo.png" alt="">
            </div>
            <div>
                <img src="./icons/weixin.png" alt="">
            </div>
            <div>
                <img src="./icons/bilibili.png" alt="">
            </div>
            <div>
                <img src="./icons/miyoushe.png" alt="">
            </div>
            <span></span>
        </div>
    </div>
    <!-- 底部模块 -->
    <div class="footer">
        <div class="footer-con">
            <div class="footer-logo">
                <div class="mihoyo">
                    <img src="./icons/mihoyo.png" alt="">
                </div>
                <span></span>
                <h1 class="genshin">
                    <img src="./icons/genshin.png" alt="">
                </h1>
            </div>
            <div class="footer-info">
                <a href="javascript:;"> 沪公网安备31010402001113号 </a>
                <span>增值电信业务经营许可证：沪B2-20190555</span>
                <div class="footer-filing">
                    <a href="javascript:;">沪ICP备19018275号-4</a>
                    <span> 沪网文〔2019〕3168-216号 </span>
                    <span>国新出审【2019】2978号</span>
                </div>
                <span>未成年成长关爱热线：021-60371740</span>
                <span>© 2020 米哈游版权所有 | 上海米哈游影铁科技有限公司</span>
                <span>客服电话：400-666-6312</span>
            </div>
        </div>
    </div>
</body>

</html>